<template>
	<view class="content">
		<lxc_nav :text="this.$t('all.p4')"></lxc_nav>
		<view id="box">
			<text class="title">{{$t('all.q4')}}</text>
			<view class="input_password">
				<u-message-input :value='keyCode' inactive-color="#e4e4e4" :maxlength="6" :breathe="false"
					:disabled-keyboard="true" @change="change" @finish="finish"></u-message-input>
			</view>
			<text class="sixpassword">{{$t('all.r4')}}</text>
			</br>
			<text class="forgetpassword" @click="cc">{{$t('all.s4')}}</text>
			<view style="height: 40vh;overflow: hidden;position: fixed;bottom: 0px;">
				<u-keyboard @change="keyClick" @backspace='bacClick' :mask="false" :mask-close-able='false'
					:show-tips="false" :cancel-btn="false" :confirm-btn="false" ref="uKeyboard" mode="number"
					:dot-enabled="true" v-model="show"></u-keyboard>
			</view>
		</view>
	</view>
</template>

<script>
	import lxc_nav from '../../components/nav.vue'
	export default {
		components: {
			lxc_nav
		},
		data() {
			return {
				oldpassword: '',
				newpassword: '',
				ConfirmPassword: '',
				show: '',
				keyCode: ''
			}
		},
		onLoad() {
			this.show = true;
		},
		methods: {
			keyClick(val) {
				if (val || val == 0) {
					if (this.keyCode.length >= 6) {

					} else {
						this.keyCode = `${this.keyCode}${val}`;
					}


				}
			},
			bacClick() {
				this.keyCode = this.keyCode.substring(0, this.keyCode.length - 1);

			},
			cc() {
				console.log(123456);
			}


		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F1F1F1;
	}

	#box {
		position: relative;
		top: 88rpx;
		width: 92vw;
		margin-left: 4vw;
		// color: $u-content-color;
		text-align: center;
	}

	.title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #1989FA;
		line-height: 60rpx;
		position: relative;
		top: 156rpx;
	}

	.input_password {
		position: relative;
		top: 255rpx;
	}

	.sixpassword {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 60rpx;
		position: relative;
		top: 328rpx;
	}

	.forgetpassword {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #DA3A3F;
		line-height: 60rpx;
		position: relative;
		top: 328rpx;
		z-index: 10074;
	}
</style>
